import * as echarts from "echarts";

// 卡片数据
export const cardData = {
    leftConfig: {
        // 卡片样式
        cardStyle: {
            padding: "10px",
        },
        // 布局配置
        colLayout: {
            xl: 24,
            lg: 24,
            md: 24,
            sm: 24,
            xs: 24
        },
        data: [
            {
                cardId: 222,
                title: "客流趋势分析",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [ // 卡片筛选项
                    { type: "areaTimeRange", url: "/static/cardLights.json", field: "cardLights" },
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/tesssssssssssst", // 接口地址
                    style: {
                        height: 220
                    }, // 卡片主体样式
                    config: {
                        tooltip: {
                            trigger: "axis",
                        },
                        legend: {
                            show: false
                        },
                        grid: {
                            left: '3%',
                            right: '10%',
                            top: "10%",
                            bottom: '5%',
                            containLabel: true
                        },
                        dataset: {
                            dimensions: ["label", "value"],
                            source: [
                                { label: '测试1', value: 1000 },
                                { label: '测试2', value: 888 },
                                { label: '测试3', value: 884 },
                                { label: '测试4', value: 600 },
                                { label: '测试5', value: 500 }
                            ]
                        },
                        dataZoom: [
                            {
                                show: true,
                                type: "inside",
                                endValue: 5,
                                xAxisIndex: [0, 1],  // 注意顺序，0 是主要的 xAxis
                            },
                        ],
                        xAxis: {
                            type: 'category',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    width: 1,
                                    color: "rgba(6,156,162,0.34)"
                                }
                            },
                            axisTick: {
                                show: false   // 隐藏 x 轴刻度线
                            },
                            axisLabel: {
                                color: '#BCCBCC',
                                fontSize: 10,
                                fontWeight: 400
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false   // y 轴刻度线默认显示，可省略
                            },
                            axisLabel: {
                                color: '#BCCBCC',
                                fontSize: 8,
                                fontWeight: 400
                            },
                            splitLine: {
                                show: true,  // 显示网格线
                                lineStyle: {
                                    color: "rgba(6,156,162,0.34)",  // 你可以调整颜色和透明度
                                    type: "solid"
                                }
                            }
                        },
                        series: [{
                            type: 'line',
                            symbol: 'circle',
                            symbolSize: 4,
                            lineStyle: {
                                color: '#FFF462',
                                width: 1
                            },
                            itemStyle: {
                                color: '#FFF462'
                            },
                            label: {
                                show: false,
                                position: 'top',
                                color: '#BBD2E9',
                                fontSize: 7,
                            },
                            encode: {
                                x: 'label',
                                y: 'value'
                            }
                        }]
                    }, // 卡片配置
                }
            },
            {
                cardId: 1,
                title: "客流地域分析",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [ // 卡片筛选项
                    { type: "areaTimeRange", url: "/static/cardLights.json", field: "cardLights" },
                    { type: "selectPicker", url: "/test/test/test/test", field: "cardType" },
                    { type: "datePicker", url: "", field: "cardDate" },
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/testtest", // 接口地址
                    style: {
                        height: 220
                    }, // 卡片主体样式
                    config: {
                        tooltip: {
                            trigger: "item",
                        },
                        legend: {
                            orient: "vertical",
                            right: "15%",
                            top: "middle",
                            itemHeight: 6,
                            itemWidth: 7,
                            textStyle: {
                                fontSize: 8,
                                rich: {
                                    color0: { color: '#4E7CD8' },
                                    color1: { color: '#4EBC92' },
                                    color2: { color: '#FFAF3D' },
                                    color3: { color: '#FF5F12' }
                                }
                            },
                            formatter: (name) => {
                                const source = cardData.leftConfig.data[1].cardBodyConfig.config.dataset.source;
                                const index = source.findIndex(i => i.name === name);
                                const item = source[index];
                                if (item) {
                                    // 颜色样式名和索引对应
                                    const styleName = `color${index}`;
                                    return `{${styleName}|${name}  ${item.value}  ${item.percentage}%}`;
                                }
                                return name;
                            }
                        },
                        dataset: {
                            dimensions: ["name", "value", "percentage"],
                            source: [
                                { name: "测试1", value: 10, percentage: 10 },
                                { name: "测试2", value: 20, percentage: 20 },
                                { name: "测试3", value: 70, percentage: 70 },
                                { name: "测试4", value: 50, percentage: 50 },
                            ]
                        },
                        series: [
                            {
                                type: "pie",
                                encode: {
                                    itemName: "name",
                                    value: "value"
                                },
                                color: ['#4E7CD8', '#4EBC92', '#FFAF3D', '#FF5F12', '#C2DCD5', '#9D6B0A'],
                                center: ['25%', '50%'],
                                radius: ['45%', '65%'],
                                label: {
                                    show: false
                                }
                            }
                        ],
                    }, // 卡片配置
                }
            },
            {
                cardId: 3,
                title: "客流来源Top10",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [ // 卡片筛选项
                    { type: "areaTimeRange", url: "/static/cardLights.json", field: "cardLights" }
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddress2", // 接口地址
                    style: {
                        height: 300
                    }, // 卡片主体样式
                    config: {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { type: 'shadow' }
                        },
                        grid: {
                            left: 10,
                            right: 30,
                            top: 10,
                            bottom: 10,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(6,156,162,0.34)'
                                }
                            },
                            axisTick: { show: false },
                            axisLabel: { fontSize: 8, color: '#BCCBCC', fontWeight: 400 },
                            splitLine: { show: false }
                        },
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(10,72,79,0.26)'
                                }
                            },
                            axisTick: { show: false },
                            axisLabel: { fontSize: 8, color: '#BCCBCC', fontWeight: 400 },
                            splitLine: { show: false }
                        },
                        dataset: {
                            dimensions: ['city', 'value'],  // 显式声明维度顺序
                            source: [
                                { city: '测试市1', value: 1000 },
                                { city: '测试市2', value: 888 },
                                { city: '测试市3', value: 884 },
                                { city: '测试市4', value: 600 },
                                { city: '测试市5', value: 500 },
                                { city: '测试市6', value: 400 },
                                { city: '测试市7', value: 300 },
                                { city: '测试市8', value: 200 },
                                { city: '测试市9', value: 100 },
                                { city: '测试市10', value: 50 }
                            ]
                        },
                        series: [
                            {
                                type: 'bar',
                                barWidth: 8,
                                encode: { y: 'city', x: 'value' },
                                itemStyle: {
                                    borderRadius: [0, 2, 2, 0],
                                    color: function (params) {
                                        const idx = params.dataIndex;
                                        if (idx === 0) {
                                            // 第1个柱子
                                            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                                { offset: 0, color: 'rgba(205,71,68,0)' },
                                                { offset: 1, color: '#CD4744' }
                                            ]);
                                        } else if (idx === 1) {
                                            // 第2个柱子
                                            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                                { offset: 0, color: 'rgba(205,129,31,0)' },
                                                { offset: 1, color: '#CD811F' }
                                            ]);
                                        } else if (idx === 2) {
                                            // 第3个柱子
                                            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                                { offset: 0, color: 'rgba(23,110,200,0)' },
                                                { offset: 1, color: '#176EC8' }
                                            ]);
                                        } else {
                                            // 其余柱子统一颜色
                                            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                                { offset: 0, color: 'rgba(123,191,201,0)' },
                                                { offset: 1, color: '#7BBFC9' }
                                            ]);
                                        }
                                    }
                                },
                                label: {
                                    show: true,
                                    position: 'right',
                                    fontSize: 8,
                                    formatter: function (params) {
                                        const rank = params.dataIndex + 1;
                                        if (rank === 1) return `{no1|No.1}`;
                                        if (rank === 2) return `{no2|No.2}`;
                                        if (rank === 3) return `{no3|No.3}`;
                                        return `{other|${rank}}`;
                                    },
                                    rich: {
                                        no1: {
                                            color: '#CD4744',
                                            fontSize: 8,
                                            fontWeight: 'normal'
                                        },
                                        no2: {
                                            color: '#CD811F',
                                            fontSize: 8,
                                            fontWeight: 'normal'
                                        },
                                        no3: {
                                            color: '#176EC8',
                                            fontSize: 8,
                                            fontWeight: 'normal'
                                        },
                                        other: {
                                            color: '#BDBEBE',
                                            fontSize: 8,
                                            fontWeight: 'normal'
                                        }
                                    }
                                }
                            }
                        ]
                    }, // 卡片配置
                }
            }
        ]
    },
    rightConfig: {
        // 卡片样式
        cardStyle: {
            padding: "10px",
        },
        // 布局配置
        colLayout: {
            span: 24
        },
        data: [
            {
                cardId: 3222,
                title: "客流参数配置",
                showSectionCondition: "",
                cardFilterOptions: [],
                cardBodyConfig: {
                    type: "mapLineConfig", // 类型 echart/table/mapLineConfig
                    url: "", // 接口地址
                    style: {
                        height: 180
                    }, // 卡片主体样式
                    config: {
                    }, // 卡片配置
                }
            },
            {
                cardId: 3,
                title: "客流来源",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [
                    { type: "areaTimeRange", url: "/static/cardLights.json", field: "cardLights" },
                    { type: "tabGroup", url: "/cardDesign/card/info/tabs", field: "tabType" },
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddress3", // 接口地址
                    style: {
                        height: 220
                    }, // 卡片主体样式
                    config: {
                        tooltip: {
                            trigger: "item",
                        },
                        legend: {
                            orient: "vertical",
                            right: "15%",
                            top: "middle",
                            itemHeight: 6,
                            itemWidth: 7,
                            textStyle: {
                                fontSize: 8,
                                rich: {
                                    color0: { color: '#10C477' },
                                    color1: { color: '#02BBFF' },
                                    color2: { color: '#FFAF3D' },
                                    color3: { color: '#FF5F12' }
                                }
                            },
                            formatter: (name) => {
                                const source = cardData.rightConfig.data[1].cardBodyConfig.config.dataset.source;
                                const index = source.findIndex(i => i.name === name);
                                const item = source[index];
                                if (item) {
                                    // 颜色样式名和索引对应
                                    const styleName = `color${index}`;
                                    return `{${styleName}|${name}  ${item.value}  ${item.percentage}%}`;
                                }
                                return name;
                            }
                        },
                        dataset: {
                            dimensions: ["name", "value", "percentage"],
                            source: [
                                { name: "测试1", value: 10, percentage: 10 },
                                { name: "测试2", value: 20, percentage: 20 },
                                { name: "测试3", value: 70, percentage: 70 },
                            ]
                        },
                        series: [
                            {
                                type: "pie",
                                encode: {
                                    itemName: "name",
                                    value: "value"
                                },
                                color: ['#10C477', '#02BBFF', '#FFAF3D', '#FF5F12'],
                                center: ['25%', '50%'],
                                radius: ['45%', '65%'],
                                label: {
                                    show: false
                                }
                            }
                        ],
                    }, // 卡片配置
                }
            },
            {
                cardId: 4,
                title: "实时客流排行",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddressTable1", // 接口地址
                    style: {
                        height: 300
                    }, // 卡片主体样式
                    config: {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { type: 'shadow' }
                        },
                        grid: {
                            left: 10,
                            right: 30,
                            top: 10,
                            bottom: 10,
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(6,156,162,0.34)'
                                }
                            },
                            axisTick: { show: false },
                            axisLabel: { fontSize: 8, color: '#BCCBCC', fontWeight: 400 },
                            splitLine: { show: false }
                        },
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(10,72,79,0.26)'
                                }
                            },
                            axisTick: { show: false },
                            axisLabel: { fontSize: 8, color: '#BCCBCC', fontWeight: 400 },
                            splitLine: { show: false }
                        },
                        dataset: {
                            dimensions: ['city', 'value'],  // 显式声明维度顺序
                            source: [
                                { city: '测试市1', value: 1000 },
                                { city: '测试市2', value: 888 },
                                { city: '测试市3', value: 884 },
                                { city: '测试市4', value: 600 },
                                { city: '测试市5', value: 500 },
                                { city: '测试市6', value: 400 },
                                { city: '测试市7', value: 300 },
                                { city: '测试市8', value: 200 },
                                { city: '测试市9', value: 100 },
                                { city: '测试市10', value: 50 }
                            ]
                        },
                        series: [
                            {
                                type: 'bar',
                                barWidth: 8,
                                encode: { y: 'city', x: 'value' },
                                itemStyle: {
                                    borderRadius: [0, 2, 2, 0],
                                    color: function (params) {
                                        const idx = params.dataIndex;
                                        if (idx === 0) {
                                            // 第1个柱子
                                            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                                { offset: 0, color: 'rgba(205,71,68,0)' },
                                                { offset: 1, color: '#CD4744' }
                                            ]);
                                        } else if (idx === 1) {
                                            // 第2个柱子
                                            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                                { offset: 0, color: 'rgba(205,129,31,0)' },
                                                { offset: 1, color: '#CD811F' }
                                            ]);
                                        } else if (idx === 2) {
                                            // 第3个柱子
                                            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                                { offset: 0, color: 'rgba(23,110,200,0)' },
                                                { offset: 1, color: '#176EC8' }
                                            ]);
                                        } else {
                                            // 其余柱子统一颜色
                                            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                                { offset: 0, color: 'rgba(123,191,201,0)' },
                                                { offset: 1, color: '#7BBFC9' }
                                            ]);
                                        }
                                    }
                                },
                                label: {
                                    show: true,
                                    position: 'right',
                                    fontSize: 8,
                                    formatter: function (params) {
                                        const rank = params.dataIndex + 1;
                                        if (rank === 1) return `{no1|No.1}`;
                                        if (rank === 2) return `{no2|No.2}`;
                                        if (rank === 3) return `{no3|No.3}`;
                                        return `{other|${rank}}`;
                                    },
                                    rich: {
                                        no1: {
                                            color: '#CD4744',
                                            fontSize: 8,
                                            fontWeight: 'normal'
                                        },
                                        no2: {
                                            color: '#CD811F',
                                            fontSize: 8,
                                            fontWeight: 'normal'
                                        },
                                        no3: {
                                            color: '#176EC8',
                                            fontSize: 8,
                                            fontWeight: 'normal'
                                        },
                                        other: {
                                            color: '#BDBEBE',
                                            fontSize: 8,
                                            fontWeight: 'normal'
                                        }
                                    }
                                }
                            }
                        ]
                    }, // 卡片配置
                }
            }
        ]
    }
}